<template>
  <div py-40rpx>
    <div text-center>
      <div text-main-color v-if="!otherUser">你正在开团购买</div>
      <div text-main-color v-else>为你加入仅差<span>{{ otherUser.toBeGroupedNum }}</span>人的团购买</div>
    </div>
    <div flex flex-a-c flex-j-c my-20rpx>
      <div text-center text-24rpx>
        <!-- 如果说有团长 展示团长名称 -->
        <image w-100rpx h-100rpx v-if="otherUser" :src="otherUser.face || '/static/default.png'" />
        <image w-100rpx h-100rpx v-else :src="userInfo.face || '/static/default.png'" />
        <div text-main-color>团长</div>
      </div>
      <div class="line">
      </div>
      <div text-center text-24rpx>
        <!-- 如果说没有团长 这里也就不展示了 -->
        <div v-if="otherUser">
          <image w-100rpx h-100rpx :src="userInfo.face || '/static/default.png'" />
        </div>
        <div v-else>
          <image w-100rpx h-100rpx :src="'/static/default.png'" />
        </div>
        <div text-warmgray>
          等待参团
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import storage from '@/utils/storage';
const otherUser = storage.getJoinUserData()

console.log(otherUser)
const userInfo = storage.getUserInfo()
</script>

<style scoped>
.line {
  margin-left: 14rpx;
  margin-right: 14rpx;
  margin-bottom: 50rpx;
  width: 143rpx;
  border-bottom: 2px dotted #999;
}
</style>
